/* 右侧控制面板区域
 *  RightTabs.jsx
 */
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';

import {upCompAttr,upCompSurface,upCompAnimation,upCompEvent} from '../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../actions/FileHandleAction';
import {upH5Attr} from '../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../utils/H5constants';
import UploadComponent from '../../components/UploadComponent.jsx';
import {getImageWH} from '../../utils/H5helper';

//图片选中时的编辑页面
class ImageEditComp extends Component{
	constructor(props){
		super(props);
	}
	componentDidMount(){
		$('.imgButton').popup({
    		popup : $('#rightImgPopup'),
    		on   : 'click'
  		});
  		$("#resizeBtn").popup({
  			position:"bottom right"
  		})
  	}

  	//查询图片列表
  	imgList(){
  		this.props.dispatch(listImage(null,null,10));//加载服务器的h5图片
  	}

	imgClick(src,imgName){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompAttr(this.props.pageId,compId,{src:src,name:imgName}));
	}

	resize(){
		const attributes=this.props.currentComp.get('attributes');
		const compId=this.props.currentComp.get('id');
		const res=getImageWH(attributes.get('src'));
		this.props.dispatch(upCompSurface(this.props.pageId,compId,{width:res.width,height:res.height}));
		//设置选中框
		const surface=this.props.currentComp.get('surface').merge({width:res.width,height:res.height});
		const comp=this.props.currentComp.set('surface',surface);
		this.props.setSelectComp(comp);
	}

	render(){
		const attributes=this.props.currentComp.get('attributes');
		const upCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.imgClick.bind(this),//设置图片点击事件
			imgListProps:this.imgListProps,  //显示的图片展示的属性
			multiple:false   //是否允许多个文件同时上传
		}
		return(
			<div>
				<div className="ui sub header">图片来源</div>
				<div className="ui action input">
				  <input  type="text" disabled={true} value={attributes.get('name')} />
				  <button className="ui icon button imgButton" onClick={this.imgList.bind(this)}><i className="file image outline icon"></i></button>
				  <button id="resizeBtn" data-content="还原尺寸" className="ui icon button" onClick={()=>this.resize()}><i className="undo icon"></i></button>
				</div>
				<div className="ui divider"></div>
				{/*<div className="ui toggle checkbox h5-labeled-input">
				  <input name="wechatRead" type="checkbox" checked={attributes.get('wechatRead')} onChange={()=>{this.props.editCompAttribute('wechatRead',!attributes.get('wechatRead'))}}/>
				  <label>支持微信长按识别二维码</label>
				</div>*/}
				<div id="rightImgPopup" className="ui custom popup">
					<UploadComponent {...upCompProps} />
				</div>
			</div>
			);
	}
}

//编辑tab
class EditTab extends Component{
	constructor(props){
		super(props);
	}

	editCompAttribute(name,value){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompAttr(this.props.pageId,compId,{[name]:value}));
	}

	render(){
		const attributes=this.props.currentComp.get('attributes');
		let classProps="ui bottom attached tab segment";
		if(this.props.active){
			classProps += " active";
		}
		classProps='';

		if(this.props.currentComp.get('id')==null){//页面时
			return (<div className={classProps} style={{paddingLeft:10}}>
						<i className="announcement icon"></i>
						<span style={{marginLeft:10}}>选择组件进行编辑</span>
					</div>);
		}
		

		//字体设置
		const fontOpts=FONTS.map(item=>{
			return (<option key={item.value} value={item.value} style={{fontFamily:item.value}}>{item.name}</option> );
		});
		let fontSize=Array();
		for(let i=12;i<=100;i++){
			fontSize.push(<option key={i} value={i} style={{fontSize:i}}>{i}</option>);
		}
		const fontSet=(
				<div>{/* 字体设置 */}
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">字体</div>
					  <select className="ui dropdown" value={attributes.get('fontFamily')} onChange={(e)=>{this.editCompAttribute('fontFamily',e.target.value)}} >{fontOpts}</select>
					</div>

					<br/>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">字体大小</div>
					  <select className="ui dropdown" value={attributes.get('fontSize')} onChange={(e)=>{this.editCompAttribute('fontSize',e.target.value)}} >{fontSize}</select>
					</div>
					
					<br/>
					<div className="ui labeled input h5-labeled-input">
						<div className="ui label">字体颜色</div>
					</div>
					<div style={{display:'inline-flex'}}>
						<input type="color" value={attributes.get('fontColor')} onChange={(e)=>{this.editCompAttribute('fontColor',e.target.value)}} />
					</div>
					<br/>
					{/* 加粗，斜体，下划线 */}
					<div className="ui icon buttons" style={{marginTop:5}}>
					  <button className={attributes.get('bold')?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('bold',!attributes.get('bold'))}><i className="bold icon"></i></button>
					  <button className={attributes.get('italic')?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('italic',!attributes.get('italic'))}><i className="italic icon"></i></button>
					  <button className={attributes.get('underline')?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('underline',!attributes.get('underline'))}><i className="underline icon"></i></button>
					</div>
					<div className="ui divider"></div> {/*分隔条*/}
					<div className="ui sub header">对齐方式</div>
					<div className="ui icon buttons">
					  <button className={attributes.get('textAlign')=='left'?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('textAlign','left')}><i className="align left icon"></i></button>
					  <button className={attributes.get('textAlign')=='center'?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('textAlign','center')}><i className="align center icon"></i></button>
					  <button className={attributes.get('textAlign')=='right'?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('textAlign','right')}><i className="align right icon"></i></button>
					</div>
					<div className="ui divider"></div>
				</div>
			);
		//行高设置
		const lineHeightSet=(
				<div>{/*行高设置*/}
					<div className="ui sub header">行高：{attributes.get('lineHeight')}</div>
					<div>
						<input name="line-height" type="range" step="0.1" min="0" max="6" 
						value={attributes.get('lineHeight')} onChange={(e)=>{this.editCompAttribute('lineHeight',e.target.value)}} />
					</div>
					<div className="ui divider"></div>
				</div>
			);
		//图片设置
		const imgProps={
			currentComp:this.props.currentComp,
			dispatch:this.props.dispatch,
			editCompAttribute:this.editCompAttribute.bind(this),
			pageId:this.props.pageId
		}
		const imgSet=(<ImageEditComp {...imgProps} />);
		//文本内容设置
		const labelContent=(
				<div>{/*行高设置*/}
					<div className="ui sub header">文本内容</div>
					<div>
						<textarea style={{height:80,width:'100%'}} value={attributes.get('content')} onChange={(e)=>{this.editCompAttribute('content',e.target.value)}} />
					</div>
					<div className="ui divider"></div>
				</div>
			);

		//表单基本设置
		const baseSet=(
				<div>
					<h4 className="ui header">基本设置</h4>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">必填</div>
					  <select className="ui dropdown" value={attributes.get('required')} onChange={(e)=>{this.editCompAttribute('required',e.target.value)}} >
					  	  <option value="false">否</option>
					  	  <option value="true">是</option>
					  </select>
					</div>
					<br/>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">名称</div>
					  <input value={attributes.get('name')} type="text" onChange={(e)=>{this.editCompAttribute('name',e.target.value)}} />
					</div>
					<br/>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">提示文字</div>
					  <input value={attributes.get('placeholder')} type="text" onChange={(e)=>{this.editCompAttribute('placeholder',e.target.value)}} />
					</div>
					<div className="ui divider"></div>
				</div>
			);
		//表单基本设置
		const baseSet2=(
				<div>
					<h4 className="ui header">基本设置</h4>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">名称</div>
					  <input value={attributes.get('name')} type="text" onChange={(e)=>{this.editCompAttribute('name',e.target.value)}} />
					</div>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">选项</div>
					  <input value={attributes.get('options')} type="text" onChange={(e)=>{this.editCompAttribute('options',e.target.value)}} />
					</div>
					<div className="ui divider"></div>
				</div>
			);
		//表单样式设置
		const styleSet=(
				<div>
					<h4 className="ui header">样式</h4>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">字号</div>
					  <input value={attributes.get('fontSize')} type="text" onChange={(e)=>{this.editCompAttribute('fontSize',e.target.value)}} />
					</div>
					<br/>
					<div className="ui labeled input h5-labeled-input">
						<div className="ui label">字体颜色</div>
					</div>
					<div style={{display:'inline-flex'}}>
						<input type="color" value={attributes.get('fontColor')} onChange={(e)=>{this.editCompAttribute('fontColor',e.target.value)}} />
					</div>
					<br/>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">背景颜色</div>
					</div>
					<div style={{display:'inline-flex'}}>
						<input type="color" value={attributes.get('background')} onChange={(e)=>{this.editCompAttribute('background',e.target.value)}} />
					</div>
				</div>
			);
		
		const compType=this.props.currentComp.get('type');//组件类型
		let content='';
		switch(compType){
			case 'label':
				content=(<div>{labelContent}{fontSet}{lineHeightSet}</div>);
				break;
			case 'image':
				content=(<div>{imgSet}</div>);
				break;
			case 'input':
				content=(<div>{baseSet}{lineHeightSet}{styleSet}</div>);
				break;
			case 'textarea':
				content=(<div>{baseSet}{lineHeightSet}{styleSet}</div>);
				break;
			case 'select':
				content=(<div>{baseSet2}{styleSet}</div>);
				break;
			default:
				content='';
		}
		return(
			<div className={classProps}>{content}</div>
		);
	}
}

class PageSurface extends Component{
	constructor(props){
		super(props);
		this.imgListProps={category:2,row:2,col:5};
	}

	componentDidMount(){
		$('.bgImgBtn').popup({
			position:'bottom center',
    		popup : $('#bgImgPopup'),
    		on   : 'click'
  		});
  		$(".bgMusicBtn").popup({
			position:'bottom center',
    		popup : $('#bgMusicPopup'),
    		on   : 'click'
  		});
  		$(".loadingPageBtn").popup({
			position:'left center',
    		popup : $('#loadingPagePopup'),
    		on   : 'click'
  		});

  	}
  	//查询图片列表
  	imgList(){
  		this.props.dispatch(listImage(null,null,10));
  		this.props.dispatch(clearPageIdArr());
  	}
  	//查询音乐列表
  	musicList(){
  		this.props.dispatch(listMusic(null,null,10));//加载服务器的音乐
  		this.props.dispatch(clearPageIdArr());
  	}

  	//查询文件列表
  	fileList(){
  		this.props.dispatch(listFile(null,null,10));
  		this.props.dispatch(clearPageIdArr());
  	}

	editPageAttribute(name,value){
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{[name]:value}));
	}

	delPageBackground(){
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{bgName:'',background:''}));
	}

	delBackMusic(){
		this.props.dispatch(upH5Attr('bgMusicName',''));
		this.props.dispatch(upH5Attr('bgMusicUrl',''));
	}

	delLoadingPage(){
		this.props.dispatch(upH5Attr('loadingPageName',''));
		this.props.dispatch(upH5Attr('loadingPageUrl',''));
	}

	imgClick(src,imgName){
		const bg="url("+src+") center center no-repeat";
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{bgName:imgName,background:bg}));
		$(".bgImgBtn").popup("hide");
	}

	chooseMusicClick(src,name){
		this.props.dispatch(upH5Attr('bgMusicName',name));
		this.props.dispatch(upH5Attr('bgMusicUrl',src));
		$(".bgMusicBtn").popup("hide");
	}

	chooseLoadClick(src,name){
		this.props.dispatch(upH5Attr('loadingPageName',name));
		this.props.dispatch(upH5Attr('loadingPageUrl',src));
		$(".loadingPageBtn").popup("hide");
	}

	backColorSet(value){
		//this.editPageAttribute('background',value);
		this.props.dispatch(updatePageAttr(this.props.page.get('id'),{bgName:value,background:value}));
	}

	render(){
		const attributes=this.props.page.get('attributes');
		const upCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.imgClick.bind(this),//设置图片点击事件
			multiple:false   //是否允许多个文件同时上传
		};
		const musicUpCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['music'],//显示的标签页
			musicItemClick:this.chooseMusicClick.bind(this),//设置点击事件
			multiple:false   //是否允许多个文件同时上传
		};
		const loadUpCompProps={
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.chooseLoadClick.bind(this),//设置点击事件
			multiple:false   //是否允许多个文件同时上传
		}
		return(
			<div>
				<h4 className="ui header">页面配置</h4>
				<div className="ui toggle checkbox h5-labeled-input">
				  <input type="checkbox" checked={attributes.get('swipeForbidden')} onChange={()=>{this.editPageAttribute('swipeForbidden',!attributes.get('swipeForbidden'))}}/>
				  <label>当页禁止滑动</label>
				</div>
				<div className="ui divider"></div>
				<h4 className="ui header">页面背景</h4>
				<div className="ui action input h5-labeled-input">
				  <input  type="text" disabled={true} value={attributes.get('bgName')} style={{width:150}}/>
				  <button className="ui icon button bgImgBtn" onClick={this.imgList.bind(this)}><i className="file image outline icon"></i></button>
				  <button className="ui icon button" onClick={()=>this.delPageBackground()}><i className="trash icon"></i></button>
				</div>
				<div style={{display:'inline-flex'}}>
					<input type="color" value={attributes.get('background')} onChange={(e)=>{this.backColorSet(e.target.value)}} />
				</div>
				<div className="ui labeled input h5-labeled-input">
					 <div className="ui label">背景透明度</div>
					 <input type="range" step="0.05" style={{width:'50%'}} value={attributes.get('backgroundOpacity')} min="0" max="1" onChange={(e)=>{this.editPageAttribute('backgroundOpacity',e.target.value)}} />{attributes.get('backgroundOpacity')}
				</div>
				<div className="ui divider"></div>
				<h4 className="ui header">背景音乐</h4>
				<div className="ui action input h5-labeled-input">
				  <input  type="text" disabled={true} value={this.props.h5Data.attributes.bgMusicName} style={{width:150}}/>
				  <button className="ui icon button bgMusicBtn" onClick={this.musicList.bind(this)}><i className="music icon"></i></button>
				  <button className="ui icon button" onClick={()=>this.delBackMusic()}><i className="trash icon"></i></button>
				</div>
				<div className="ui divider"></div>
				<h4 className="ui header">设置加载页</h4>
				<div className="ui action input h5-labeled-input">
				  <input  type="text" disabled={true} value={this.props.h5Data.attributes.loadingPageName} style={{width:150}}/>
				  <button className="ui icon button loadingPageBtn" onClick={this.imgList.bind(this)}><i className="archive icon"></i></button>
				  <button className="ui icon button" onClick={()=>this.delLoadingPage()}><i className="trash icon"></i></button>
				</div>
				<div id="bgImgPopup" className="ui custom popup">
					<UploadComponent {...upCompProps} />
				</div>
				<div id="bgMusicPopup" className="ui custom popup">
					<UploadComponent {...musicUpCompProps} />
				</div>
				<div id="loadingPagePopup" className="ui custom popup">
					<UploadComponent {...loadUpCompProps} />
				</div>
			</div>
		);
	}
}

//外观设置Tab
class SurfaceTab extends Component{
	constructor(props){
		super(props);
	}

	editCompSurface(name,value){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompSurface(this.props.pageId,compId,{[name]:value}));
		//设置选中框
		const surface=this.props.currentComp.get('surface').set(name,value);
		const comp=this.props.currentComp.set('surface',surface);
		this.props.setSelectComp(comp);
	}

	render(){
		const surface=this.props.currentComp.get('surface');
		let classProps="ui bottom attached tab segment";
		if(this.props.active){
			classProps += " active";
		}
		classProps='';
		if(this.props.currentComp.get('id')==null){//返回页面的属性修改
			const pageProps={
				page:this.props.page,
				h5Data:this.props.h5Data,
				dispatch:this.props.dispatch
			}

			return (
				<div className={classProps}>
					<PageSurface {...pageProps} />
				</div>
			);
		}
		

		let bgShow='none';
		let borderShow='block';
		let borderTypeShow='block';
		const compType=this.props.currentComp.get('type');//组件类型
		switch(compType){
			case 'label':
				bgShow='block';
				break;
			case 'image':
				bgShow='none';
				break;
			case 'input':
				bgShow='none';
				borderTypeShow='none';
				break;
			case 'textarea':
				bgShow='none';
				borderTypeShow='none';
				break;
			case 'select':
				bgShow='none';
				borderShow='none';
				break;
			default:
				bgShow='none';
				borderTypeShow='none';
				borderShow='none';
		}
		return(
			<div className={classProps}>
				<div>
					<h4 className="ui header">位置和尺寸</h4>
					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">X 坐标</div>
					  <input value={surface.get('x')} type="text" onChange={(e)=>{this.editCompSurface('x',e.target.value)}} />
					</div>

					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">Y 坐标</div>
					  <input value={surface.get('y')} type="text" onChange={(e)=>{this.editCompSurface('y',e.target.value)}} />
					</div>

					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">&nbsp;&nbsp;&nbsp;&nbsp;宽度</div>
					  <input value={surface.get('width')} type="text" onChange={(e)=>{this.editCompSurface('width',e.target.value)}} />
					</div>

					<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">&nbsp;&nbsp;&nbsp;&nbsp;高度</div>
					  <input value={surface.get('height')} type="text" onChange={(e)=>{this.editCompSurface('height',e.target.value)}} />
					</div>

					<div className="ui divider"></div> 
					<h4 className="ui header">旋转</h4>
					<div className="ui labeled input">
					  <div className="ui label">角度</div>
					  <input type="range" step="1" value={surface.get('rotate')} min="-360" max="360" onChange={(e)=>{this.editCompSurface('rotate',e.target.value)}} />{surface.get('rotate')}
					</div>
					
					<div className="ui divider"></div>
					<h4 className="ui header">样式</h4>
					<div className="ui labeled input">
					  <div className="ui label">不透明度</div>
					  <input type="range" step="0.05" style={{width:'50%'}} value={surface.get('opacity')} min="0" max="1" onChange={(e)=>{this.editCompSurface('opacity',e.target.value)}} />{surface.get('opacity')}
					</div>
					<div style={{display:bgShow}}>
						<div className="ui labeled input h5-labeled-input">
						  <div className="ui label">背景颜色</div>
						</div>
						<input type="color" value={surface.get('background')} onChange={(e)=>{this.editCompSurface('background',e.target.value)}} />
					</div>
					<div className="ui divider"></div>
					<div style={{display:borderShow}}>
						<h4 className="ui header">边框</h4>
						<div style={{display:borderTypeShow}}>
							<div className="ui labeled input h5-labeled-input">
							  <div className="ui label">边线类型</div>
							  <select className="ui dropdown" value={surface.get('border')} onChange={(e)=>{this.editCompSurface('border',e.target.value)}} >
							  	<option value="solid">实线</option> 
								<option value="double">双线</option>
								<option value="dashed">虚线</option>
								<option value="dotted">点线</option>
							  </select>
							</div>
							<br/>
						</div>
						<div className="ui labeled input h5-labeled-input">
						  <div className="ui label">边线颜色</div>
						</div>
						<input type="color" value={surface.get('borderColor')} onChange={(e)=>{this.editCompSurface('borderColor',e.target.value)}} />
						<div className="ui small labeled input h5-labeled-input">
						  <div className="ui label">边线宽度</div>
						  <input type="range" step="0.5" style={{width:'60%'}} value={surface.get('borderSize')} min="0" max="10" onChange={(e)=>{this.editCompSurface('borderSize',e.target.value)}} />{surface.get('borderSize')}
						</div>
						<div className="ui labeled input h5-labeled-input">
						  <div className="ui label">圆角半径</div>
						  <input value={surface.get('borderRadius')} type="text" onChange={(e)=>{this.editCompSurface('borderRadius',e.target.value)}} />
						</div>
					</div>
				</div>
			</div>
		);
	}
}

class AnimationTab extends Component{
	constructor(props){
		super(props);
	}

	playAnimation(id){
		let animation=$("#animation").val();
		let duration=$("#duration").val()+'s';
		if(animation!=''){
			//console.log(id+'play animation');
			$("#"+id).css({ 
				'animation':'',
        	    '-webkit-animation':''
			});
			$("#"+id).hide();
			const animationVal=animation+' '+duration;
			$("#"+id).css({ 
        	   'display': 'block',
        	   'animation':animationVal,
        	   '-webkit-animation':animationVal
           });
		}
	}

	upCompAnima(name,value){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompAnimation(this.props.pageId,compId,{[name]:value}))
	}

	//设置整个h5页面的属性
	upH5Attribute(name,value){
		this.props.dispatch(upH5Attr(name,value));
	}

	render(){
		let classProps="ui bottom attached tab segment";
		if(this.props.active){
			classProps += " active";
		}
		classProps = "";
		const compId=this.props.currentComp.get('id');
		if(compId==null){//页面动画效果设置
			return(
				<div className="panel-group">
					<h4 className="ui header">翻页</h4>
					{/*<div className="ui labeled input h5-labeled-input">
					  <div className="ui label">翻页方向</div>
					  <select className="ui dropdown">
					  	<option value="vertical">竖向</option>
						<option value="horizontal">横向</option>
					  </select>
					</div>
					<br/>slide, fade, coverflow or flip*/}
					<div className="input-group">
					  <span className="input-group-addon">翻页效果</span>
					  <select className="form-control input-sm" value={this.props.h5Data.attributes.swiperEffect} onChange={e=>this.upH5Attribute('swiperEffect',e.target.value)}>
					  	<option value="slide">显示稿</option>
					  	<option value="coverflow">卡片</option>
						<option value="fade">淡出</option>
						<option value="flip">翻转</option>
					  </select>
					</div>
					<div className="ui toggle checkbox h5-labeled-input">
					  <input type="checkbox" checked={this.props.h5Data.attributes.loop} onChange={()=>{this.upH5Attribute('loop',!this.props.h5Data.attributes.loop)}}/>
					  <label>循环播放</label>
					</div>
					{/*<div className="ui labeled input h5-labeled-input">
				  		<div className="ui label">翻页时长(秒)</div>
				  		<input style={{width:'50%'}} type="range" step="0.05" defaultValue="0.5" min="0" max="1" />
					</div>*/}
				</div>
				);
		}
		const animationOpts=ANIMATIONS.map(item=>{
			return (<option key={item.value} value={item.value}>{item.name}</option>)
		});
		const animations=this.props.currentComp.get('animations');
		let animation=Immutable.fromJS({name:'',duration:1,delay:0});
		if(animations.size>0){
			animation=animations.get(0);
		}
		return(
			<div className="panel-group">
				<div className="input-group">
				  <span className="input-group-addon">方案</span>
				  <select id="animation" className="form-control input-sm" value={animation.get('name')} onChange={e=>this.upCompAnima('name',e.target.value)}>
				  	<option value="">无</option>
					{animationOpts}
				  </select>
				</div>
				<div className="input-group">
					<span className="input-group-addon">时长(秒)</span>
					<span className="input-group-addon ranger">
						<input id="duration" type="range" step="0.1" min="0" max="10" style={{width:'100%'}} value={animation.get('duration')}  onChange={e=>this.upCompAnima('duration',e.target.value)} />
					</span>
					<input type="number" className="form-control input-sm" step="0.1" min="0" value={animation.get('duration')} onChange={e=>this.upCompAnima('duration',e.target.value)} />
				</div>
				<div className="input-group">
					<span className="input-group-addon">延时(秒)</span>
					<span className="input-group-addon ranger">
						<input id="delay" type="range" step="0.1" min="0" max="10" style={{width:'100%'}} value={animation.get('delay')}  onChange={e=>this.upCompAnima('delay',e.target.value)} />
					</span>
					<input type="number" className="form-control input-sm" step="0.1" min="0" value={animation.get('delay')} onChange={e=>this.upCompAnima('delay',e.target.value)} />
				</div>
				<div className="input-group">
					<button className="mini ui button" onClick={()=>this.playAnimation(compId)}>播放 </button>
				</div>
			</div>
		);
	}
}

/*
actionType:"control",
control:{target: "大号字", action: "show"},
link:{prefix: "http://", url: ""},
layout:{offsetX: "", offsetY: "", scale: 0},
type:"tap"
*/

class EventTab extends Component{
	constructor(props){
		super(props);
	}

	actionTypeSelect(value){
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{actionType:value}));
	}

	constrolSet(name,value){
		const target=$("#event-control-target").val();
		const action=$("#event-control-action").val();
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{control:{target:target,action:action}}));
	}

	linkPrefix(value){
		let url=$("#event-link-url").val();
		if(value==''||value=='@submit'){
			$('#linkUrl').hide();
			url='';
		}else{
			$('#linkUrl').show();
		}
		if(value=='#page'){
			$('#linkUrl').attr('placeholder','输入单个数字页码');
		}else{
			$('#linkUrl').attr('placeholder','输入url地址');
		}
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{link:{prefix:value,url:url}}));

	}

	linkUrlSet(value){
		const prefix=$("#event-link-prefix").val();
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{link:{prefix:prefix,url:value}}));
	}


	render(){
		let classProps="ui bottom attached tab segment";
		if(this.props.active){
			classProps += " active";
		}
		classProps = "";
		const compId=this.props.currentComp.get('id');
		if(compId==null){//页面事件
			return (<div className={classProps} style={{paddingLeft:10}}>
						<i className="announcement icon"></i>
						<span style={{marginLeft:10}}>选择组件进行编辑</span>
					</div>);
		}
		const events=this.props.currentComp.get('events');

		let compEvent=Immutable.fromJS({actionType:"",control:{target: "", action: ""},link:{prefix: "", url: ""}});
		if(events.size>0){
			compEvent=events.get(0);
		}

		let optCompt=Array();
		this.props.page.get('components').forEach(item=>{
			if(item.get('name').indexOf('[')<0){
				optCompt.push(<option key={item.get('id')} value={item.get('id')}>{item.get('name')}</option>);
			}
		});
		const controlDiv=(
				<div>
				  当点击&nbsp;&nbsp;
				  <select id="event-control-target" className="input-sm" onChange={e=>this.constrolSet('target',e.target.value)} value={compEvent.get('control').get('target')}>
				  	<option value="">无</option>
				  	{optCompt}
				  </select>&nbsp;&nbsp;时&nbsp;&nbsp;
				  <select id="event-control-action" className="input-sm" onChange={e=>this.constrolSet('action',e.target.value)} value={compEvent.get('control').get('action')}>
				  	<option value="">无</option>
				  	<option value="show">显示</option>
				  	<option value="hide">隐藏</option>
				  </select>
				</div>
			);
		let urlDisplay='inline-block';
		if(compEvent.get('link').get('prefix')==''||compEvent.get('link').get('prefix')=='@submit'){
			urlDisplay='none';
		}
		const linkDiv=(
				<div>
					<div>当点击时</div>
					<div className="form-inline">
					  <select id="event-link-prefix" className="input-sm" style={{width:85}} onChange={e=>this.linkPrefix(e.target.value)} value={compEvent.get('link').get('prefix')}>
					  	<option value="">无</option>
					  	<option value="http">http://</option>
					  	<option value="https">https://</option>
					  	<option value="#page">页码跳转</option>
					  	<option value="@submit">表单提交</option>
					  </select>&nbsp;&nbsp;
					  <input id="event-link-url" id="linkUrl" className="form-control" type="text"  style={{width:180,display:urlDisplay}} value={compEvent.get('link').get('url')} onChange={e=>this.linkUrlSet(e.target.value)}/>
					</div>
				</div>
			);
		let optContent="";
		switch(compEvent.get('actionType')){
			case 'control' :
				optContent=controlDiv;
				break;
			case 'link' :
				optContent=linkDiv;
				break;
			default:
				optContent='';
		}
		
		return(
			<div className={classProps}>
				<div className="panel-group">
					<div>
						<span style={{fontSize:18,marginLeft:10}}>事件</span>
						{/*<button style={{float:'right',marginRight:20,border:'none',backgroundColor:'#fff'}}><i className="trash icon"  ></i></button>*/}
					</div>
					<div className="input-group">
					  <span className="input-group-addon">类别</span>
					  <select className="form-control input-sm" onChange={e=>this.actionTypeSelect(e.target.value)} value={compEvent.get('actionType')}>
					  	<option value="">无</option>
						<option value="control">控制类</option>
						<option value="link">链接类</option>
					  </select>
					</div>
					{optContent}
					<div className="ui divider"></div>
				</div>

				{/*<button className="ui small blue button" onClick={this.addEvent.bind(this)}><i className="plus icon"></i>添加事件 </button>*/}
			</div>
		);
	}
}



//右侧栏目
class RightTabs extends Component{
	constructor(props){
		super(props);
		this.state={editableActive:true,surfaceActive:false,animationActive:false,eventActive:false};
	}

	componentDidMount(){
		$('.imgBtn').popup({
    		popup : $('#imgPopup'),
    		on   : 'click'
  		});
  	}
  	//查询图片列表
  	imgList(){
  		this.props.dispatch(listImage(null,null,10));//加载服务器的h5图片
  	}
	
	tabClick(name){
		const newState=Object.assign({editableActive:false,surfaceActive:false,animationActive:false,eventActive:false}, {[name]:true}); 
		this.setState(newState);
	}

	render(){
		const dataProps={
			currentComp:this.props.currentComp,
			setSelectComp:this.props.setSelectComp,
			dispatch:this.props.dispatch,
			pageId:this.props.pageId,
			page:this.props.page,
			h5Data:this.props.h5Data
		}

		let tabContent=(<span></span>);
		let overflowy={};
		if(this.state.editableActive)
			tabContent=(<EditTab {...dataProps} />);
		else if(this.state.surfaceActive){
			tabContent=(<SurfaceTab {...dataProps} />);
			if(this.props.currentComp.get('id'))
				overflowy={overflowY:'auto'};
		}
		else if(this.state.animationActive)
			tabContent=(<AnimationTab {...dataProps} />);
		else if(this.state.eventActive)
			tabContent=(<EventTab {...dataProps} />);
		
		return(
		  	<aside className="edit-right-handles">
			  	<div className="ui top attached tabular menu">
			  		<a className={this.state.editableActive?"item active":"item"} onClick={this.tabClick.bind(this,'editableActive')}>编辑 </a>
			  		<a className={this.state.surfaceActive?"item active":"item"} onClick={this.tabClick.bind(this,'surfaceActive')}>外观 </a>
			  		<a className={this.state.animationActive?"item active":"item"} onClick={this.tabClick.bind(this,'animationActive')}>动画 </a>
			  		<a className={this.state.eventActive?"item active":"item"} onClick={this.tabClick.bind(this,'eventActive')}>事件 </a>
				</div>
				<div className="ui bottom attached rightTab active" style={overflowy}>
					{tabContent}
				</div>
				{/*<EditTab {...dataProps} active={this.state.editableActive} />
				<SurfaceTab {...dataProps} active={this.state.surfaceActive} />
				<AnimationTab {...dataProps} active={this.state.animationActive} />
				<EventTab {...dataProps} active={this.state.eventActive} />*/}
			</aside>
		);
	}
}

export default connect((state,ownProps)=>{
	const page=state.app.h5Reducer.data.pages.get(ownProps.pageId);//当前活动页面
	let currentComp=Immutable.Map();
	if(ownProps.selComp.get('id')){
		const id=ownProps.selComp.get('id');
		currentComp=page.get("components").get(id);
	}
	return {
		h5Data:state.app.h5Reducer.data,
		page:page,
		currentComp:currentComp
	};

})(RightTabs);


